<template>
  <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
    <div class="container2 w-full h-full pr-4 ">
      <div class="top-container bg-white ">
        <div class=" header-title flex items-center content-center mb-2 bg-white">
          <div class="flex-1 h-[1px] bg-gradient-to-l from-indigo-200 via-indigo-100/50 to-transparent mr-3"></div>
          <div class="flex items-center  rounded-lg py-0.5 px-2">
            <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
            <span class="title font-semibold text-indigo-600 ml-1.5"
                  style="font-size: 18px">{{ $t('wms.inventoryInformation') }}</span>
          </div>
          <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
        </div>
        <div class="card-list pb-2">
          <div class="card-list-left rounded-xl border-slate-200">
            <video id="logo-video" :poster="data.videoUrl" autoplay muted loop
                   playsinline type="video/mp4" :src="data.videoUrl"></video>
          </div>
          <div class="card-list-right overflow-hidden ">
            <card-item v-for="(item, index) in data.materialRequirement" :item="item" :key="index"
                       :class="{ 'mr-5': index !== data.materialRequirement.length - 1 }"></card-item>
          </div>
        </div>
      </div>
      <div class="bottom-container mt-2 ">
        <div class="bottom-left-container">
          <div class="line-header">
            <icon-font icon-class="afl-liebiao"></icon-font>
            {{ $t('wms.selectWarehouse') }}
          </div>
          <div class="tabBox">
            <div class="tab-item" :class="data.tabIndex==index?' tab-item tab-item2' : 'tab-item' "
                 v-for="(item, index) in data.warehouseList" :key="index"
                 @click="changeIndex(index,item)">
              <icon-font icon-class="afl-chanxianguanli"
                         :class="(data.tabIndex==index)?'iconfonts':'iconfont'"></icon-font>
              <div :class="data.tabIndex==index?'tab-choice' : '' ">{{
                  `${item.warehouseCode}-${item.warehouseName}`
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-right-container bg-white p-2">
          <!--  汇总信息   -->
          <div class="informationSummary">
            <el-table border id="out-table" :data="data.infoTable" :fit="true" table-layout="fixed"
                      header-align="center"
                      stripe
                      v-loading="data.loading"
                      style="width:100%;height: 95%;" :cell-style="{textAlign: 'center'}"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                      @row-click="(row, column, event) => rowClick(row, column, event) ">
              <el-table-column :label="$t('wms.materialSummInfo')">
                <el-table-column prop="materialCode" :label="$t('wms.materialCode')" width="140">
                  <template #default="scope">
                    <el-popover trigger="hover" placement="top" width="200">
                      <el-descriptions class="margin-top" :column="1" size="small"  border>
                        <el-descriptions-item label-align="center"
                        align="center" >
                          <template #label>
                            <i class="el-icon-user"></i>
                            {{ $t('wms.materialName') }}
                          </template>
                          {{ scope.row.materialName }}
                        </el-descriptions-item>
                      </el-descriptions>
                      <template v-slot:reference>
                        <div class="name-wrapper">
                          <el-tag size="large" effect="plain">{{ scope.row.materialCode }}
                          </el-tag>
                        </div>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column prop="materialName" :label="$t('wms.materialName')" v-if="false"/>
                <el-table-column prop="spec" :label="$t('wms.materialSpce')">
                  <template #default="scope">
                    {{ scope.row.spec || '---' }}
                  </template>
                </el-table-column>
                <el-table-column prop="qty" :label="$t('wms.totals')" width="150">
                  <template #default="scope">
                    <el-tag type="warning" size="default" plain style="width:100px;padding: 5px 10px">{{ scope.row.qty || 0 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" :label="$t('wms.unit')" width="80"/>
              </el-table-column>
            </el-table>
            <div class="demo-pagination-block">
              <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 50, 80]"
                             :small="small" :disabled="disabled" background
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
            </div>
          </div>
          <!--  明细信息   -->
          <div class="details">
            <el-table border id="out-table"
                      :data="data.infoTables" :fit="true" table-layout="fixed" align="center" header-align="center" stripe
                      v-loading="data.loading2"
                      style="width:100%;height: 95%;text-align: center" :cell-style="{textAlign: 'center'}"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                    >
              <el-table-column :label="$t('wms.details')">
                <el-table-column :label="$t('wms.materialInformations')">
                  <el-table-column prop="barcode" :label="$t('wms.barNumber')" width="180"/>
                  <el-table-column prop="materialCode" :label="$t('wms.materialCode')" width="140">
                    <template #default="scope">
                      <el-popover trigger="hover" placement="top" width="200">
                        <el-descriptions class="margin-top" :column="1" size="small" border>
                          <el-descriptions-item style="text-align: center">
                            <template #label>
                              <i class="el-icon-user"></i>
                              {{ $t('wms.materialName') }}
                            </template>
                            {{ scope.row.materialName }}
                          </el-descriptions-item>
                        </el-descriptions>
                        <template v-slot:reference>
                          <div class="name-wrapper">
                            <el-tag size="large" effect="plain">{{ scope.row.materialCode }}
                            </el-tag>
                          </div>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column prop="materialName" :label="$t('wms.materialName')"/>
                  <el-table-column prop="warehouseCode" :label="$t('wms.warehouse')"/>
                  <el-table-column prop="locationCode" :label="$t('wms.storageLocation')"/>
                  <el-table-column prop="currentQty" :label="$t('wms.qty')">
                    <template #default="scope">
                      <el-tag type="primary" plain style="width:auto;padding: 5px 10px">
                        {{ scope.row.currentQty || 0 }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unit" :label="$t('wms.unit')"/>
                </el-table-column>
                <el-table-column :label="$t('wms.InspectionInfo')">
                  <el-table-column prop="qcStatus" :label="$t('wms.one-checkState')" width="150">
                    <template #default="scope">
                      <el-tag effect="dark" size="large" :type="scope.row.qcStatus=='pass'?'success': 'danger'"
                              style="width:80px">
                        {{
                          scope.row.qcStatus == 'pass' ? $t('wms.qualified') : scope.row.qcStatus == 'fail' ? $t('wms.fail') : '-'
                        }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="secondQcStatus" :label="$t('wms.secondaryInspection')" width="150">
                    <template #default="scope">
                      <el-tag effect="dark" size="large" :type="scope.row.secondQcStatus=='pass'?'success': 'danger'"
                              style="width:80px">
                        {{
                          scope.row.secondQcStatus == 'pass' ? $t('wms.qualified') : scope.row.secondQcStatus == 'fail' ? $t('wms.fail') : '-'
                        }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="demo-pagination-block">
              <el-pagination :currentPage="data.currentPage2" :page-size="data.pagesize2" :page-sizes="[20, 50, 80]"
                             :small="small" :disabled="disabled"
                             background
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="data.total2" @size-change="handleSizeChange2"
                             @current-change="handleCurrentChange2"/>
            </div>
          </div>
        </div>
      </div>
    </div>

  </ScaleBox>
</template>

<script setup>
// 引入组件，进去页面显示加载
import iconFont from '@/components/IconFont/iconFont'
import { onMounted, reactive, ref } from 'vue'
import cardItem from './cardItem.vue'
import '@/assets/font/iconfont.css'
import '@/style/tailwind.css'
import ScaleBox from 'vue3-scale-box'
import {
  getInventoryInfo,
  getInventorySummary,
  getInventoryInfoSumm,
  getInventorySum
} from '@/api/inventoryInforSummaryApi'
import config from '@/config/index'
import useI18n from '@/hooks/language'

const { t } = useI18n()

const data = reactive({
  ready: false,
  switchBtn: true,
  infoShow: true,
  zhEn: '',
  info: 'Y',
  tabIndex: 9999,
  materialCode: '', // 物料代码
  warehouseList: [], // 仓库
  warehouseCode: '', // 仓库code
  materialRequirement: [], // 物料需求
  infoTable: [], // 表格
  infoTables: [], // 表格
  currentPage: 1, // 当前页
  pagesize: 20, // 每页显示多少条
  total: 0, // 总的多少数据
  currentPage2: 1, // 当前页
  pagesize2: 20, // 每页显示多少条
  total2: 0, // 总的多少数据
  videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
  loading: false, // 添加 loading 状态
  loading2: false // 添加第二个表格的 loading 状态
})

onMounted(() => {
  getInventoryWarhouseList()
  // setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await getInventoryWarhouseList()
  }, 6000)
}
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 库存信息的仓库获取
const getInventoryWarhouseList = () => {
  getInventoryInfo({
    size: 9999,
    current: 1
  }).then(res => {
    data.warehouseList = res.data.records
    // 获取返回的第一条仓库赋值
    // data.warehouseCode = res[0].warehouseCode
    inventorySum()
    inventorySummary()
    inventoryInfoSumm()
  })
}

// 头部card信息
const inventorySummary = () => {
  // console.log(localStorage.getItem('lang') || 'zh_CN')
  data.zhEn = localStorage.getItem('lang') || 'zh_CN'
  getInventorySummary({
    warehouseCode: data.warehouseCode
  }).then(function (res) {
    data.materialRequirement = [{
      title: t('inventoryInforSummary.itemsQty'),
      name: 'qty',
      num: 0,
      bgc: 'bgc1',
      unit: ' Pcs',
      color: '#afcaf4',
      color2: '#116ee3',
      iconfont: 'icon-ico-book'
    }, {
      title: t('inventoryInforSummary.barcodeQty'),
      name: 'barcodeQty',
      num: 0,
      unit: ' Pcs',
      bgc: 'bgc2',
      color: '#b4eaf6',
      color2: '#5f909c',
      iconfont: 'icon-ico-timerange'

    }, {
      title: t('inventoryInforSummary.monthTotal'),
      name: 'fgInBox',
      num: 0,
      unit: ' Box',
      bgc: 'bgc3',
      color: '#ffd3ad',
      color2: '#ff8c31',
      iconfont: 'icon-zichanbaobiao'
    }, {
      title: t('inventoryInforSummary.monthlyTotal'),
      name: 'fgInPallect',
      num: 0,
      unit: ' Pallet',
      bgc: 'bgc4',
      color: '#adffc4',
      color2: '#46ff31',
      iconfont: 'icon-zichanbaobiao'
    }]
    Object.keys(res.data).forEach((item, index) => {
      data.materialRequirement.forEach(a => {
        if (a.name == item) {
          a.num = res.data[item]
        }
      })
    })
    // data.materialRequirement = res.data
    console.log(data.materialRequirement)
  })
}

// 物料别汇总信息  表格
const inventorySum = () => {
  data.loading = true
  getInventorySum({
    warehouseCode: data.warehouseCode,
    current: data.currentPage,
    size: data.pagesize
  }).then(res => {
    data.infoTable = res.data.records
    data.total = res.data.total
  }).finally(() => {
    data.loading = false
  })
}

// 明细数据汇总
const inventoryInfoSumm = () => {
  data.loading2 = true
  getInventoryInfoSumm({
    warehouseCode: data.warehouseCode,
    isInfo: data.info,
    materialCode: data.materialCode,
    current: data.currentPage2,
    size: data.pagesize2
  }).then(res => {
    data.infoTables = res.data.records
    data.total2 = res.data.total
  }).finally(() => {
    data.loading2 = false
  })
}

// 表格点击事件
const rowClick = (row, column, event) => {
  data.materialCode = row.materialCode
  inventoryInfoSumm()
}

// 列表选择，并获取仓库的code 点击事件
const changeIndex = (index, item) => {
  data.tabIndex = index
  data.warehouseCode = item.warehouseCode
  data.currentPage = 1
  data.currentPage2 = 1
  data.infoTables = []
  inventorySummary()
  inventorySum()
  inventoryInfoSumm()
}
// 表格分页 汇总
const handleSizeChange = (val) => {
  data.pagesize = val
  inventorySum()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  // console.log(data.currentPage)
  inventorySum()
}
// 表格分页 明细
const handleSizeChange2 = (val) => {
  data.pagesize2 = val
  inventoryInfoSumm()
}
const handleCurrentChange2 = (val) => {
  data.currentPage2 = val
  // console.log(data.currentPage)
  inventoryInfoSumm()
}
</script>

<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

</style>
